<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*公共部分开始*/
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 1200px;
				margin: 0 auto;
			}
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				display: table;
				content: "";
				clear: both;
			}
			.fr{
				float: right;
			}
			.fl{
				float: left;
			}
			ul,li{
				list-style: none;
			}
			.icon{
				background: url("icon.png") no-repeat;
			}
			/*底栏开始*/
			.footer_box{
				width: 1200px;
				background: #1f1f1f;
				margin: 0 auto;
			}
			
			.footer_box h3{
				color: #828280;
				font-size: 20px;
				text-align: left;
				width: 980px;
				margin: 0 auto;
				padding-bottom:17px;
				padding-top:17px;
			}
			/*轮播开始*/
			.menu_you_look{
				width: 980px;
				margin: 0 auto;
				background: #fff;
				position: relative;
			}
			.menu_you_look .look_btn{
				position:absolute ;
				top: 330px;
				left: 425px;
			}
			.menu_you_look .look_btn span{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background: #ddd;
				margin-left:30px ;
			}
			.menu_you_look .look_btn span:nth-child(2){
				background: red;
			}
			.menu_you_look ul li{
				display: inline-block;
				margin-bottom: 30px;
			}
			.menu_you_look .look1{
				width: 180px;
				margin: 30px 30px;
				
			}
			.menu_you_look .look1:hover{
				box-shadow: 3px 3px 15px #ddd;
				
			}
			.menu_you_look .look1 a img{
			    width: 180px;
			    height: 180px;
			    padding-bottom: 20px;	
			}
			.menu_you_look .look1 .look1_color .color{
				display: inline-block;
				width: 30px;
				height: 15px;

			}
			.menu_you_look .look1 .look1_color .color1{
				background: black;
				
			}
			.menu_you_look .look1 .look1_color .color2{
				background: red;
				
			}
			.menu_you_look .look1 .look1_name{
				font-size: 12px;
				font-weight: bold;
				color: #2f2f2b;
				display: inline-block;
				padding-bottom: 5px;

			}
			.menu_you_look .look1 .look1_name:hover{
                text-decoration: underline;
			} 
			.menu_you_look .look1 .look1_info{
				border-top:1px solid #ddd ;
				
			}
			.menu_you_look .look1 .look1_price{
				font-size: 12px;
				color: #2f2f2b;
				line-height: 24px;
			}
			/*文字区域开始*/
			.ubok_info{
				width: 980px;
				margin: 40px auto;
				
			}
			.ubok_info ul li:{

			}
			.ubok_info ul li a{
				display: inline-block;
				color: #d0d0cf;
				text-decoration: none;
				font-size: 12px;
				padding-bottom:5px;
				
			}
			.ubok_info ul li a:hover{
				text-decoration: underline;
			}
			.ubok_info ul li dt{
				color: #828280;
				font-size: 12px;
				display: inline-block;
				padding-bottom: 10px;
			}
			
			.ubok_info ul li:nth-child(-n+4){
				margin-right: 147px;
			}
			.ubok_copy{
				width:980px;
				height: 40px;
				color: #d0d0cf;
				font-size: 12px;
				margin: 0 auto;
				text-align: center;
			}
			/*小图标样式开始*/
			
			.ubok_copy .icon_copyright{
				display: inline-block;
				vertical-align: middle;
				width: 20px;
      			height: 20px;
      			background-position: -403px -217px;
                background-size: 800px 1000px;
			}

			.follow_me{
				display:block;
				margin-top:20px;
			}
			.icon_weibo{
				display: inline-block;
				width: 41px;
      			height: 35px;
      			background-position: -262px -169px;
                background-size: 800px 1000px;
                padding-right: 20px;

			}
			.icon_weibo:hover{
				display: inline-block;
				width: 41px;
             	height: 35px;
             	background-position: -262px -218px;
                background-size: 800px 1000px;

                padding-right: 20px;

			}
			.icon_weixin{
				display: inline-block;
				width: 42px;
      			height: 34px;
      			background-position: -333px -170px;
                background-size: 800px 1000px;
			}
			.icon_weixin:hover{
				display: inline-block;
				width: 42px;
             	height: 34px;
             	background-position: -333px -218px;
                background-size: 800px 1000px;

			}
			.icon_mail{
				display: inline-block;
				width: 20px;
      			height: 17px;
      			background-position: -477px -84px;
                background-size: 800px 1000px;

                padding-right: 5px;
                vertical-align: middle;

			}
			.icon_timer{
				display: inline-block;
				width: 20px;
      			height: 20px;
      			background-position: -444px -84px;
                background-size: 800px 1000px;
                padding-right: 5px;
                vertical-align: middle;

			}
			.icon_phone{
				display: inline-block;
				width: 21px;
      			height: 19px;
      			background-position: -409px -84px;
                background-size: 800px 1000px;
                padding-right: 5px;
                vertical-align: middle;

			}
		</style>
	</head>
	<body>
		<div class="footer_box">
				<h3>最近浏览</h3>
			    <div class="menu_you_look">
			    	<ul class="">
			    		<li class="">
			    			<div class="look1">
			    		        <a href="#"><img src="look1_1.jpg"/></a>
			    		        <div class="look1_color">
			    		        	<span class="color color1" style="background: #7e777a;"></span>
			    		        	<span class="color color2" style="background: #87a2b1;"></span>
			    		        </div>
			    		        <div class="look1_info">
			    		        	<span class="look1_name">透气清凉男子短袖T恤</span><br />
			    		        	<span class="look1_price">￥299</span>
			    		        </div>
			                </div>
			    		</li>
			    		<li class="">
			    			<div class="look1">
			    		        <a href="#"><img src="look2_1.jpg"/></a>
			    		        <div class="look1_color">
			    		        	<span class="color color1" style="background: #81c5ea;"></span>
			    		        	<span class="color color2" style="background: #29282d;"></span>
			    		        </div>
			    		        <div class="look1_info">
			    		        	<span class="look1_name">率性而为夏季新款女子背心</span><br />
			    		        	<span class="look1_price">￥299</span>
			    		        </div>
			                </div>
			    		</li>
			    		<li class="">
			    			<div class="look1">
			    		        <a href="#"><img src="look3.jpg"/></a>
			    		        <div class="look1_color">
			    		        	<span class="color color1" style="background: #006dcc;"></span>
			    		        	<span class="color color2" style="background: #fff;"></span>
			    		        </div>
			    		        <div class="look1_info">
			    		        	<span class="look1_name">瑜伽运动女子背心</span><br />
			    		        	<span class="look1_price">￥199</span>
			    		        </div>
			                </div>
			    		</li>
			    		<li class="">
			    			<div class="look1">
			    		        <a href="#"><img src="look4.jpg"/></a>
			    		        <div class="look1_color">
			    		        	<span class="color color1"></span>
			    		        	<span class="color color2" style="background: #fff;"></span>
			    		        </div>
			    		        <div class="look1_info">
			    		        	<span class="look1_name">明星款率性短裤</span><br />
			    		        	<span class="look1_price">￥299</span>
			    		        </div>
			                </div>
			    		</li>
			    	</ul>
			    	<p class="look_btn"><span></span><span></span><span></span></p>
			    </div>
			    <div class="ubok_info">
			    	<ul class="clearfix">
			    		<li class="fl">
			    			<dl>
			    				<dt>产品</dt>
			    				<dd><a href="#">鞋类</a></dd>
			    				<dd><a href="#">服装</a></dd>
			    				<dd><a href="#">配件</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">新品上市</a></dd>
			    				<dd><a href="#">折扣专区</a></dd>
			    				<dd></dd>
			    				
			    				<dd></dd>
			    				<dd><a href="#">Ubok定制</a></dd>
			    				<dd><a href="#">Ubok经典系列</a></dd>
			    			</dl>
			    		</li>
			    		<li class="fl">
			    			<dl>
			    				<dt>运动系列</dt>
			    				<dd><a href="#">跑步鞋</a></dd>
			    				<dd><a href="#">跑步服装</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">训练鞋</a></dd>
			    				<dd><a href="#">训练服装</a></dd>
			    				<dd><a href="#">训练装备</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">足球鞋</a></dd>
			    				<dd><a href="#">篮球鞋</a></dd>
			    				<dd><a href="#">网球鞋</a></dd>
			    				<dd><a href="#">其他鞋类</a></dd>
			    			</dl>
			    		</li>
			    		<li class="fl">
			    			<dl>
			    				<dt>经典系列</dt>
			    				<dd><a href="#">清风系列</a></dd>
			    				<dd><a href="#">Winner</a></dd>
			    				<dd><a href="#">Freedom</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">Jason</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">Supperstar</a></dd>
			    			</dl>
			    		</li>
			    		<li class="fl">
			    			<dl>
			    				<dt>公司信息</dt>
			    				<dd><a href="#">关于我们</a></dd>
			    				<dd><a href="#">企业发展史</a></dd>
			    				<dd></dd>
			    				<dd><a href="#">门店查询</a></dd>
			    				<dd><a href="#">在线客服</a></dd>
			    				<dd><a href="#">物流查询</a></dd>
			    			</dl>
			    		</li>
			    		<li>
			    			<dl>
			    				<dt>联系我们</dt>
			    				<dd><a href="#"><span class="icon icon_phone" ></span>400-889-5666</a></dd>
			    				<dd><a href="#"><span class="icon icon_mail"></span>service@ubok.com</a></dd>
			    				<dd><a href="#"><span class="icon icon_timer"></span>9:30~20:00</a></dd>
			    				<dd class="follow_me"><a href="#"><span class="icon icon_weibo"></span></a><a href="#"><span class="icon icon_weixin"></span></a></dd>
			    				<dd></dd>
			    			</dl>
			    		</li>
			    		
			    	</ul>
			    </div>
			    <div class="ubok_copy">
			    	<span>Copyright&nbsp;&nbsp; ©2017 ubok&nbsp;&nbsp; |&nbsp;&nbsp; 隐私权保护&nbsp;&nbsp; |&nbsp;&nbsp;<span class="icon icon_copyright"></span> 上海工商&nbsp;&nbsp;|&nbsp;&nbsp; 沪ICP备10248017号</span>
			    </div>
			
		</div>
		
	</body>
</html>
